import { DataTableColumn, NSpace, NPopconfirm } from 'naive-ui'
import { useTable } from '@/hooks'
import useCommandComponent from '@/hooks/useCommandComponent'
import { ModalOrOperatePageType } from '../../types'
import { FilterItem } from '../../components/filterGroup.vue'

import modal from '../../modal/index.vue'

/** 此处类型到时候可以替换成接口返回类型 */
type T = Array<object>

export function useTablePageModal() {
  const router = useRouter()
  const checked = ref(true)
  const { tableData, tableParams, handleUpdatePage, handleUpdatePageSize } = useTable<T>()

  /** 头部筛选项 */
  const filterOptions = computed(() => {
    return [
      {
        label: '名称',
        key: 'name',
        span: 4,
        type: 'NInput'
      },
      {
        label: '类型帆帆帆2222222222帆',
        key: 'type',
        span: 4,
        type: 'NSelect',
        originPros: {
          options: [
            {
              label: '11',
              value: '11'
            }
          ]
        }
      },
      {
        label: '日期',
        key: 'date',
        span: 4,
        type: 'NDatePicker',
        originPros: {
          type: 'daterange',
          valueFormat: 'yyyy-MM-dd'
        }
      },
      {
        label: '这是一个很长的名称',
        key: 'name',
        span: 4,
        type: 'NInput'
      }
    ] as Array<FilterItem>
  })
  /** 筛选值 */
  const filterParams = ref<any>({})
  /** 筛选 */
  function search(val: any) {
    console.log(val)
    filterParams.value = val
    resetPage()
  }

  /** 更新页容量 */
  function changePageSize(val: number) {
    handleUpdatePageSize(val)
    resetPage()
  }
  /** 重置表格数据限制条件状态 */
  function resetPage() {
    const { pageNo } = tableParams.value
    if (pageNo === 1) {
      getData()
    } else {
      handleUpdatePage(1)
    }
  }
  /** 表格项 */
  const coloumns = ref<Array<DataTableColumn>>([
    {
      title: '测试title1',
      key: 'cs1'
    },
    {
      title: '测试title2',
      key: 'cs2'
    },
    {
      title: '测试title3',
      key: 'cs3'
    },
    {
      title: '操作',
      width: 160,
      key: 'actions',
      render: () => {
        const btns = [
          h(
            'div',
            {
              style: { color: '#1072E0', cursor: 'pointer' },
              onClick: () => {
                console.log('查看')
                openModalOrPage({ title: '企业', modalOrPageType: '查看', id: '111122222' })
              }
            },
            { default: () => '查看' }
          ),
          h(
            'div',
            {
              style: { color: '#1072E0', cursor: 'pointer' },
              onClick: () => {
                console.log('编辑')
                openModalOrPage({ title: '企业', modalOrPageType: '编辑', id: '111122222' })
              }
            },
            { default: () => '编辑' }
          ),
          h(
            NPopconfirm,
            {
              onNegativeClick: () => {
                console.log('取消')
              },
              onPositiveClick: () => {
                console.log('确认')
              }
            },
            {
              trigger: () => {
                return h(
                  'div',
                  {
                    style: { color: '#FE5332', cursor: 'pointer' }
                  },
                  { default: () => '删除' }
                )
              },
              default: () => '确认删除嘛?'
            }
          )
        ]
        return h(
          NSpace,
          {
            size: 6
          },
          btns
        )
      }
    }
  ])
  /** 获取数据 */
  async function getData() {
    console.log('cc')

    const { pageNo, pageSize } = tableParams.value
    const params = {
      pageNo,
      pageSize,
      ...filterParams.value
    }
    Object.keys(params).forEach((e) => {
      if (!params[e]) {
        params[e] = undefined
      }
    })
    console.log(params)

    // const {data: {list, total}} =  await xxxx(params)
    tableData.value = {
      data: [{ cs1: 'aaa', cs2: 'bbb', cs3: 'ccc' }],
      total: 13
    }
  }

  /** 弹窗部分 */
  provide('testProvide', 'cccs')
  const modalInstance = useCommandComponent(modal)
  function modalCloseCallback() {
    console.log('弹窗关闭了')
    // 更新列表
    getData()
  }
  function openModalOrPage(obj: {
    title?: string
    modalOrPageType: ModalOrOperatePageType
    id?: string
  }) {
    if (checked.value) {
      // 弹窗形式
      modalInstance({ onClose: modalCloseCallback, to: '#page_wrapper', ...obj })
      return
    }

    // 页面模式
    router.push({
      path: '/basicSearchTablePage/operatePage',
      query: obj
    })
  }

  watch(
    () => tableParams.value,
    () => {
      getData()
    },
    { immediate: true, deep: true }
  )

  return {
    checked,
    coloumns,
    tableData,
    tableParams,
    filterOptions,
    search,
    openModalOrPage,
    handleUpdatePage,
    changePageSize
  }
}
